<template>
  <div class="container">
    <el-row class="mb10">

      <el-col :span="16" align="left">
        <div class="flex">
          <el-input clearable v-model="searchParams.name" placeholder="活动名称" style="width: 120px; margin-right: 15px">
          </el-input>
          <el-select clearable v-model="searchParams.className" placeholder="活动分类">
            <el-option :label="el.text" :value="el.value" :key="k" v-for="(el, k) in options.classnameList" />
          </el-select>
          <!-- <SelectOption :options="options.classnameList" :multiple="false" :placeholder="'活动分类'" @changeValue="classnameChange"></SelectOption> -->
          <el-select clearable v-model="searchParams.competitionClass" placeholder="大赛类别">
            <el-option :label="el.text" :value="el.value" :key="k" v-for="(el, k) in options.competitionclassList" />
          </el-select>
          <el-select clearable v-model="searchParams.undertakeUnit" placeholder="部门名称">
            <el-option :label="el.name" :value="el.id" :key="k" v-for="(el, k) in options.belongingunitList" />
          </el-select>
          <el-button color="#626aef" @click="getListData">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="lock" @click="getUnlock()">解锁</el-button>
        <el-button class="unlock" @click="getLock()"> 锁定 </el-button>

        <el-button class="ordinary" @click="getExport()"> 批量导出 </el-button>
        <el-button type="danger" @click="deleteList()">批量删除</el-button>

        <el-button type="primary" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <div class="box_s">
      <el-scrollbar>
        <el-table class="el_table_box" :data="allTableData" style="width: 100%;min-width: 1000px;" border
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" type="index" width="50" />
          <el-table-column :prop="el.type" width="200" :label="el.label" :key="k" v-for="(el, k) in columns" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <!-- <el-button v-if="row['状态'] == '待确认' || row['状态'] == '确认'" type="text" size="small"
              @click="handleEdit(row)">编辑</el-button>
  
            <el-button v-if="row['状态'] == '待确认' || row['状态'] == '确认'" size="small" type="text"
              @click="submitEvent(row)">提交</el-button>
  
            <el-button v-if="row['状态'] == '待审核'" size="small" type="text" @click="toExamine(row)">审核</el-button>
   -->
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button v-if="row.status == 0" size="small" type="primary" @click="handleConfirm(row)">确认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>

    <div class="tc mt15">
      <el-pagination background layout="prev, pager, next ,total,sizes,jumper" :total="page.total"
        :page-size="page.pageSize" @current-change="currentChange" @size-change="sizeChange" />
    </div>

    <!--新增、修改、确认弹框-->
    <el-dialog v-model="data.dialogVisible" width="900px" :show-close="false" :close-on-click-modal="false">
      <template #title>
        <div class="my-header">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">
              <el-form :rules="rules" ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm"
                status-icon>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="活动名称" prop="name">
                      <el-input placeholder="请输入" v-model="ruleForm.name" style="width: 250px" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="活动时间" prop="startTime">
                      <!-- <el-select v-model="ruleForm.startTime" placeholder="请选择" >
                        <el-date-picker v-model="data.reDate" type="date" placeholder="选择日期" clearable />
                      </el-select> -->
                      <el-date-picker v-model="ruleForm.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="选择日期" clearable style="width: 250px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="活动分类" prop="classId">
                      <!-- <SelectOption :options="options.classnameList" :placeholder="'请选择'"> </SelectOption> -->
                      <el-select v-model="ruleForm.classId" placeholder="请选择" style="width: 250px">
                        <el-option :label="el.text" :value="el.value" :key="k" v-for="(el, k) in options.classnameList" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="大赛类别" prop="competitionClassId">
                      <el-select v-model="ruleForm.competitionClassId" placeholder="请选择" style="width: 250px">
                        <el-option :label="el.text" :value="el.value" :key="k"
                          v-for="(el, k) in options.competitionclassList" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>

                  <el-col :span="12">
                    <el-form-item label="承担单位" prop="undertakeUnitId">
                      <!-- <SelectOption :options="options.belongingunitList" :placeholder="'请选择'"> </SelectOption> -->
                      <el-select v-model="ruleForm.undertakeUnitId" placeholder="请选择" style="width: 250px">
                        <el-option :label="el.name" :value="el.id" :key="k"
                          v-for="(el, k) in options.belongingunitList" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="获奖等级" prop="awardLevelId">
                      <!-- <SelectOption :options="options.awardList" :placeholder="'请选择'"> </SelectOption> -->
                      <el-select v-model="ruleForm.awardLevelId" placeholder="请选择" style="width: 250px">
                        <el-option :label="el.text" :value="el.value" :key="k" v-for="(el, k) in options.awardList" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="参与人员" @click="choosePersion">
                  <!-- <el-input :style="{ width: '680px' }" :value="ruleForm.joinPersionName.join(',')" placeholder="请选择">
                    <template v-slot:suffix>
                      <el-button type="text" style="height: 20px;" v-on:>选择</el-button>
                    </template>
                  </el-input> -->
                  <!-- <el-select :style="{ width: '680px' }" multiple placeholder="请选择" value-key="name"
                    v-model="ruleForm.joinPersionList" @remove-tag="clrJoin"> -->
                  <!-- <el-option :label="el.name" :value="el.id" :key="k" v-for="(el, k) in ruleForm.joinPersionList" /> -->
                  <!-- </el-select> -->
<!--                  <div class="selectLabel">
                    <el-tag v-for="tag in callPerson" :key="tag.id" class="mx-1" closable @close="handleClosePerson(tag)">
                      {{ tag.username }}
                    </el-tag>
                  </div>-->
<!--                  <span class="addLabel" @click="addPersonBox">选择人员</span>-->
                  <el-select closable v-model="ruleForm.joinPersonIds" placeholder="请选择" style="width: 250px">
                    <el-option :label="el.username" :value="el.userId" :key="k"
                               v-for="(el, k) in options.yhrenList" />
                  </el-select>

                </el-form-item>
                <el-form-item label="活动说明" prop="activityDescription">
                  <el-input :style="{ width: '680px' }" v-model="ruleForm.activityDescription"
                    :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                  <el-input :style="{ width: '680px' }" v-model="ruleForm.remark" :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea" placeholder="请输入" />
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="相关附件" name="second">
              <platformFiles :files="data.files" @dataChange="dataChange"></platformFiles>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="third">
              <record :changeLogs="data.changeLogs"></record>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitForm()">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="data.addPerson" append-to-body width="60%" top="10vh" :show-close="false"
      :close-on-click-modal="false">
      <template #title>
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="员工列表" name="first">
            <div>
              <el-row>
                <el-col :span="24" align="right">
                  <el-input v-model="data.params.name" placeholder="姓名" style="width: 150px; margin-right: 15px" />
                  <SelectOption :options="data.orgAllList" style="width: 200px;margin-right: 15px;" :placeholder="'归属单位'"
                    @change-value="changeValueUnit">
                  </SelectOption>
                  <el-button class="ordinary">搜索</el-button>
                  <!-- <Table :tableArr="data.userList" :pagination="data.page" :columns="data.tableHeader" :operate="true"
                    @delectTable="delectIds" @selectItem="selectItemFn" :total="data.page.total">
                  </Table> -->

                  <Table :tableArr="data.userList" @selectItem="selectItemFn" :columns="data.tableHeader"
                    :pagination="data.page" :operate="true" :isCheckbox="false" :total="data.page.total"></Table>
                </el-col>
              </el-row>

            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closePersonbox">关闭</el-button>
          <el-button type="primary" @click="save()">选择</el-button>
        </span>
      </template>
    </el-dialog>

    <!--选择热参与人员弹框-->
    <!-- <el-dialog v-model="data.persionDialogVisible" width="900px" :show-close="false" :close-on-click-modal="false">
      <el-row style="border-bottom: 1px solid black;padding-bottom: 10px">
        <el-col>
          <span style="font-size: 20px">员工列表</span>
          <el-button style="margin-left: 600px" @click="data.persionDialogVisible = false">关闭</el-button>
          <el-button style="margin-left: 50px" type="primary" @click="data.persionDialogVisible = false">选择</el-button>
        </el-col>
      </el-row>
      <el-form style="margin-top: 20px">
        <el-row>
          <el-form-item style="margin-left: 500px">
            <el-input v-model="searchJoin.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 50px">
            <el-select v-model="searchJoin.unitOrg" placeholder="请选择">
              <el-option :label="el.belongingUnit" :value="el.belongingCode" :key="k"
                v-for="(el, k) in options.belongingunitList" />
            </el-select>
          </el-form-item>
          <el-button type="success" style="height: 20px;margin-left: 50px">搜索</el-button>
        </el-row>
      </el-form>
      <el-table style="margin-top: 10px" :data="allJoinList" @selection-change="sltJoinList">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="cname" label="姓名"></el-table-column>
        <el-table-column label="归属单位">
          <template #default="{ row }">
            <template v-for="(v, i) in options.belongingunitList" :key="i">
              <span v-if="v.belongingCode == row.unitOrg">{{ v.belongingUnit }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="gendertext" label="性别"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="selectOrgs" label="职务"></el-table-column>
        <el-table-column prop="technicalTitle" label="职称"></el-table-column>
      </el-table>
      <div class="tc mt15" align="right">
        <el-pagination background layout="prev, pager, next ,total,sizes,jumper" :total="pageJoin.total"
          :page-size="pageJoin.pageSize" @current-change="getJoinList" @size-change="getJoinList" />
      </div>
    </el-dialog> -->

  </div>
</template>
<script lang="ts">
import platformFiles from '@/views/science/technologyStrength/components/platformFiles/platformFiles.vue'
import record from '@/views/science/technologyStrength/components/record/record.vue'
import { ObjectType } from 'typings/interfaces'
import { computed, onMounted, reactive, ref } from 'vue'
// getOrgInfo,
import request from "@/utils/request"
import Table from '@/views/science/components/table/table.vue'
import SelectOption from '@/views/science/technologyStrength/components/selectOption/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import { Modals, tips } from '../../components/tips/tips'
import {
deleteList,
getInnovativeTalentTeamLock,
getInnovativeTalentTeamUnlock,
getJoinPersons,
getOrgsByLoginUser,
getTeam,
getTotalList,
insert,
monthReportUpdate,
selectItemOpen,
updata
} from '../api/double'
import Api from '../api/profess'

// type FormInstance = InstanceType<typeof ElForm>

export default {
  components: {
    Table,
    SelectOption,
    platformFiles,
    record,
  },
  setup() {
    const store = useStore()
    const activeName = ref('first')
    const budgetYear = ref('2023')
    const choosePersion = () => {
      // 选择参与人员按钮事件
      data.persionDialogVisible = true
      getJoinList()
    };
    let data = reactive({
      dialogVisible: false,   //  新增修改确认项目弹框
      persionDialogVisible: false, //  选择参与人员弹框
      reDate: '',
      files: [],
      changeLogs: [],
      userList: [],
      joinPersonIds: [],
      addPerson: false,
      params: {
        current: 1,
        size: 10,
        name: "",
        unitOrg: ""
      },
      ids: [],
      page: { page: 1, limit: 10, total: 0 },
      tableHeader: [
        {
          key: 'name',
          type: 'name',
          width: 140,
          label: '活动名称',
        },
        {
          key: 'units',
          type: 'undertakeUnit',
          width: 140,
          label: '承担单位',
        },
        {
          key: 'estimated',
          type: 'joinMethod',
          width: 140,
          label: '参与方式',
        },
        {
          key: 'actual',
          type: 'className',
          width: 140,
          label: '活动分类',
        },
        {
          key: 'annual',
          type: 'competitionClass',
          width: 140,
          label: '大赛类别',
        },
        {
          key: 'annual',
          type: 'awardLevel',
          width: 140,
          label: '获奖等级',
        },
        {
          key: 'annual',
          type: 'joinTime',
          width: 140,
          label: '参加时间',
        },
        {
          key: 'annual',
          type: 'remark',
          width: 140,
          label: '状态',
        },
      ],
      currentHandle: '',
      allTableData: [],
      orgAllList: computed(() => store.state.technologyStrength.orgAllList),
    })

    /* const sort = {
      orderBy: 'default',
      orderType: '',
    } */
    let selectedRows: ObjectType[] = []
    let columns = [
      {
        key: 'name',
        type: 'name',
        width: 140,
        label: '活动名称',
      },
      {
        key: 'units',
        type: 'undertakeUnit',
        width: 140,
        label: '承担单位',
      },
      {
        key: 'estimated',
        type: 'joinMethod',
        width: 140,
        label: '参与方式',
      },
      {
        key: 'actual',
        type: 'className',
        width: 140,
        label: '活动分类',
      },
      {
        key: 'annual',
        type: 'competitionClass',
        width: 140,
        label: '大赛类别',
      },
      {
        key: 'annual',
        type: 'awardLevel',
        width: 140,
        label: '获奖等级',
      },
      {
        key: 'annual',
        type: 'joinTime',
        width: 140,
        label: '参加时间',
      },
      {
        key: 'annual',
        type: 'remark',
        width: 140,
        label: '状态',
      }
    ]
    const ruleForm = reactive({
      id: '',
      name: '', // 活动名称
      startTime: '', // 活动时间
      classId: '',
      className: '', // 活动分类
      competitionClassId: '',
      competitionClass: '', //大赛类别
      undertakeUnitId: '',
      undertakeUnit: '', // 承担单位
      awardLevelId: '',
      awardLevel: '', // 获奖等级
      joinPersonIds: '', // 参与人员ID
      joinPersons: '', // 参与人员ID
      joinMethod: '直接参与',
      joinTime: '',
      activityDescription: '', // 活动说明
      remark: '', // 备注
      status: '2',
      // joinPersionList: [{ id: 0, name: '' }], // 参与人员列表
    })


    const dataChange = () => {
      // detailData(store.state.technologyStrength.rowId)
    }

    let loading = ref(true)
    // 列表
    let allTableData = ref([])
    let page = reactive({
      page: 1,
      pageSize: 10,
      total: 0,
    })
    // 查询参数
    const searchParams = reactive({
      name: '',
      undertakeUnit: '',
      className: '',
      competitionClass: ''
    })
    interface Config {
      id: string
    }
    let selectArr: Config[] = reactive([])
    const handleSelectionChange = (val) => {
      selectArr = val
      console.log(val, selectArr)
    }

    let handleConfirm = (row) => {
      data.dialogVisible = true
    }
    //页码回调
    const currentChange = (pageNum) => {
      page.page = pageNum
      getListData()
    }
    //条数回调
    const sizeChange = (pageSize) => {
      page.page = 1
      page.pageSize = pageSize
      getListData()
    }

    let getListData = () => {
      selectArr = []
      loading.value = true
      getTotalList({
        page: page.page,
        pageSize: page.pageSize,
        ...searchParams,
      })
        .then((res) => {
          let resData = res.data.data
          allTableData.value = resData.records
          page.total = resData.total
        })
        .finally(() => {
          loading.value = false
        })
    }
    getListData()



    const test = (v) => {
      console.log('值变化', v)
    }


    // 参与人员列表
    let allJoinList = ref([])
    let searchJoin = reactive({
      name: '', //名称
      unitOrg: '', //机构ID
    })
    let pageJoin = {
      page: 1,
      pageSize: 10,
      total: 0,
    }
    const getJoinList = () => {
      getJoinPersons({
        current: pageJoin.page,
        size: pageJoin.pageSize,
        ...searchJoin,
      }).then((res) => {
        console.log('参与人员列表de', res)
        // let resData = res.data.data
        // allJoinList.value = resData.records
        // pageJoin.total = resData.total
        data.userList = res.data.data.records
        data.page.total = res.data.data.total
      })
      // .finally(() => {})
    }
    // 选择的参与人员
    const sltJoinList = (ls) => {
      // console.log('选择的参与人员', ls)
      // ruleForm.joinPersionList = ls.map((el) => {
      //   return {
      //     name: el.cname,
      //     id: el.userId,
      //   }
      // })
      // data.joinPersonIds = ls.map((el) => {
      //   return el.userId
      // })
    }
    const clrJoin = (e) => {
      // let ls: any[] = []
      // ruleForm.joinPersionList.map((el) => {
      //   if (e.id != el.id) {
      //     ls.push(el.id)
      //   }
      // })

      // data.joinPersonIds = ls
      console.log('删除的参与人员', e, data.joinPersonIds)
    }

    // 参与人员相关声明数据
    const callPerson: any = ref([])

    const person: any = ref([])

    const selectItemFn = (item) => {
      item.filter((item, index) => {
        const obj = {
          username: item.username,
          userId: item.userId,
        }
        if (JSON.stringify(person.value).indexOf(JSON.stringify(obj)) == -1) person.value.push(obj)
      })
    }

    const addPersonBox = () => {
      data.userList = []
      getListData()
      data.addPerson = true
    }

    const handleClosePerson = (tag) => {
      callPerson.value.splice(callPerson.value.indexOf(tag), 1)
      handleSelectPerson(callPerson)
    }

    const closePersonbox = () => {
      data.addPerson = false
      person.value = []
    }

    const save = () => {
      data.addPerson = false
      person.value.filter((item, index) => {
        //console.log(JSON.stringify(callPerson.value).indexOf(JSON.stringify(item)))
        if (JSON.stringify(callPerson.value).indexOf(JSON.stringify(item)) == -1)
          callPerson.value.push(item)
      })
      person.value = []
      handleSelectPerson(callPerson)
    }

    const changeValueUnit = (item) => {
      data.params.unitOrg = item.id
    }

    const delectIds = (ids) => {
      data.ids = ids
    }

    const arrname: any = reactive([])  //选中的人员name合集
    const arrid: any = reactive([])    //选中的人员id合集
    const handleSelectPerson = (val) => {
      val.value.map((item) => {
        if (arrname.indexOf(item.username) == -1) arrname.push(item.username)
        if (arrid.indexOf(item.userId) == -1) arrid.push(item.userId)
      })

      console.log(arrname)
      console.log(arrid)
    }

    const selectIds = (a) => {
      data.ids = a
    }




    // 存储下拉框数组的对象
    const options: any = reactive({
      classnameList: [],
      competitionclassList: [],
      belongingunitList: [],
      awardList: [],
      yhrenList: [],
    })
    //用户单位
    const yonghu = () => {
      request({
        url: '/checc-api/user/getAll',
        method: 'get',
      }).then((res) => {
        console.log('587用户单位:{}', res.data.data);
        options.yhrenList = res.data.data
      })
    }
    onMounted(() => {
      yonghu();
    });

    // const getClassnameList = async () => {
    //   const res = await getClassname()
    //   const 
    //   options.classnameList = [...res.data.data]
    // }
    // getClassnameList()
    const start = () => {
      // 活动分类
      Api.getDictByCode({ code: 'KJSL_ACTIVITY_CLASSIFICATION' }).then((res) => {
        options.classnameList = res.data.data
      })
      // 获奖等级
      Api.getDictByCode({ code: 'KJSL_AWARD_LEVEL' }).then((res) => {
        options.awardList = res.data.data
      })
      // 大赛类别
      Api.getDictByCode({ code: 'KJSL_COMPETITION_CATEGORY' }).then((res) => {
        options.competitionclassList = res.data.data
      })
      // 承担单位
      getOrgsByLoginUser().then((res) => {
        options.belongingunitList = res.data.data
      })
    }
    start()


    const classnameChange = (item) => {
      console.log(item)
    }



    // 先获取下拉框，然后加载列表
    // getOrgInfo()
    //   .then((res) => {
    //
    //   })
    //   .finally(() => {
    //     // getListData()
    //   })
    // 删除

    let deleteList = () => {
      if (!selectArr.length) {
        ElMessage({
          message: '请选择',
          type: 'warning',
        });
        return;
      }
      ElMessageBox.confirm('是否删除选择内容', '提示', {
        type: 'warning'
      }).then(() => {
        Api.deleteList({
          id: selectArr.map(el => el.id).join(','),
        }).then(res => {
          ElMessage({
            message: '删除成功',
            type: 'success',
          });
          getListData();
          console.log(78784122);
        });
      }).catch(() => {
        console.log('点击了取消');
      });
    };
    getListData()


    const handleEdit = (row) => {
      for (let key in ruleForm) {
        for (let key2 in row) {
          if (key === key2) {
            ruleForm[key] = row[key2]
          }
        }
      }
      data.dialogVisible = true
      data.currentHandle = '编辑'
      // ruleForm.competitionClass = row.competitionClass
      // ruleForm.className = row.className
      // ruleForm.name = row.name
    }

    // 新增
    const rules = reactive({
      name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
      startTime: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
      classId: [{ required: true, message: '请选择活动分类', trigger: 'change' }],
      competitionClassId: [{ required: true, message: '请选择大赛类别', trigger: 'change' }],
      undertakeUnitId: [{ required: true, message: '请选择承担单位', trigger: 'change' }],
      awardLevelId: [{ required: true, message: '请选择获奖等级', trigger: 'change' }],
      joinPersonIds: [{ required: true, message: '请选择参与人员', trigger: 'change' }],
      activityDescription: [{ required: true, message: '请输入活动说明', trigger: 'blur' }],
    })


    const add = () => {
      for (let key in ruleForm) {
        ruleForm[key] = ''
      }
      console.log('ruleForm', ruleForm);

      data.dialogVisible = true
      data.currentHandle = '新增'

    }
    const ruleFormRef = ref()
    // 保存
    const submitForm = async () => {
      console.log(ruleForm)
      await ruleFormRef.value.validate(async (valid, fields) => {
        // 活动分类
        let obj = options.classnameList.filter((item) => {
          return item.value === ruleForm.classId
        })
        // 获奖等级
        let obj2 = options.awardList.filter((item) => {
          return item.value === ruleForm.awardLevelId
        })
        // 大赛类别
        let obj3 = options.competitionclassList.filter((item) => {
          return item.value === ruleForm.competitionClassId
        })
        // 承担单位
        let obj4 = options.belongingunitList.filter((item) => {
          return item.id === ruleForm.undertakeUnitId
        })
        // 承担单位
        let obj5 = options.yhrenList.filter((item) => {
          return item.userId === ruleForm.joinPersonIds
        })
        ruleForm.joinTime = ruleForm.startTime
        ruleForm.className = obj[0].text
        ruleForm.awardLevel = obj2[0].text
        ruleForm.competitionClass = obj3[0].text
        // ruleForm.undertakeUnit = obj4[0].name
         ruleForm.joinPersons = obj5[0].username

        // let persId: any[] = []
        // let pers: any[] = []
        // data.selectPersonsList.forEach((item: any) => {
        //   data.selectPersons.forEach((item2: any) => {
        //     if (item.userId == item2) {
        //       persId.push(item.userId)
        //       pers.push(item.username)
        //     }
        //   })
        // })
        // ruleForm.joinPersonIds = persId.join(',')
        // ruleForm.joinPersons = pers.join(',')
        if (data.currentHandle == '新增') {
          const rs = await insert(ruleForm)
          console.log(rs.data);
          if (rs.data.code == 200) {
            ElMessage({
              message: '操作成功',
              type: 'success',
            })
            data.dialogVisible = false
            getListData()

          }
        } else if (data.currentHandle == '编辑') {
          const rs = await updata(ruleForm)
          console.log(rs.data);
          if (rs.data.code == 200) {
            ElMessage({
              message: '操作成功',
              type: 'success',
            })
            data.dialogVisible = false
            getListData()

          }
        }
        // let joinPersion = ruleForm.joinPersionList.length > 0 ? ruleForm.joinPersionList[0].name : ''
        // if (valid) {
        //   let body = {
        //     name: ruleForm.name,
        //     startTime: ruleForm.startTime,
        //     classId: ruleForm.className,
        //     className: '',
        //     competitionClassId: ruleForm.competitionClass,
        //     competitionClass: '',
        //     undertakeUnitId: ruleForm.undertakeUnit,
        //     undertakeUnit: '',
        //     awardLevelId: ruleForm.awardLevel,
        //     awardLevel: '',
        //     joinPersonIds: data.joinPersonIds.join(','),
        //     joinPersion: joinPersion,
        //     /* joinPersion: ruleForm.joinPersionList[0].name, */
        //     joinMethod: '直接参与',
        //     joinTime: ruleForm.startTime,
        //     activityDescription: ruleForm.acticityDescription.trim(),
        //     remark: ruleForm.remark.trim(),
        //     status: 2,
        //   }

        //   for (let val of options.classnameList) {
        //     if (val.id == ruleForm.className) {
        //       body.className = val.class_name
        //     }
        //   }

        //   for (let val of options.competitionclassList) {
        //     if (val.id == ruleForm.competitionClass) {
        //       body.competitionClass = val.competition_class
        //     }
        //   }

        //   for (let val of options.belongingunitList) {
        //     if (val.belongingCode == ruleForm.undertakeUnit) {
        //       body.undertakeUnit = val.belongingUnit
        //     }
        //   }

        //   for (let val of options.awardList) {
        //     if (val.id == ruleForm.awardLevel) {
        //       body.awardLevel = val.AwardLevel
        //     }
        //   }

        //   insert(body).then((response) => {
        //     getListData()
        //     data.dialogVisible = false
        //     return ElMessage({
        //       message: '操作成功',
        //       type: 'success',
        //     })
        //   })
        // }
      })
    }
    // 月度账单
    let monthVisible = reactive({ isShow: false })
    let openTableData = ref([])
    let cur = { belongingUnit: '', budgetYear: '' }
    const getOpenData = () => {
      selectItemOpen({
        belongingUnit: cur.belongingUnit,
        budgetYear: cur.budgetYear,
      }).then((res) => {
        openTableData.value = res.data.data
        console.log(openTableData, '+++', res)
      })
    }
    const openMonthTable = (row) => {
      cur = row
      monthVisible.isShow = true
      getOpenData()
    }

    const handleEditItem = (row) => {
      console.log(row)

      row.isEdit = true
    }
    const cancelItem = (row) => {
      row.isEdit = false
    }
    const saveItem = (row) => {
      monthReportUpdate({
        belongingUnit: row.belongingUnit,
        dataBasedMonth: row.dataBasedMonth,
        actualAmount: row.actualAmount,
        id: row.id,
      }).then(() => {
        getOpenData()
        ElMessage({
          message: '操作成功',
          type: 'success',
        })
      })
    }


    const getLock = async () => {
      console.log('selectArr.length', selectArr.length);
      console.log('selectArr[0].id', selectArr[0].id);

      if (selectArr.length == 1) {
        Modals('是否锁定选择内容', '提示', 'warning').then(async () => {
          let res = await getInnovativeTalentTeamLock(selectArr[0].id)
          if (res.data.success) {
            tips('锁定成功', 'success')
            getListData()
          }
        }).catch(() => {
          console.log("点击了取消")
        })

      } else if (selectArr.length == 0) {
        tips('请选择', 'warning')
      } else {
        tips('锁定功能不可批量操作', 'warning')
      }
    }
    const getUnlock = async () => {
      if (selectArr.length == 1) {
        Modals('是否解锁选择内容', '提示', 'warning').then(async () => {
          let res = await getInnovativeTalentTeamUnlock(selectArr[0].id)
          if (res.data.success) {
            tips('解锁成功', 'success')
            getListData()
          }
        }).catch(() => {
          console.log("点击了取消")
        })

      } else if (selectArr.length == 0) {
        tips('请选择', 'warning')
      } else {
        tips('解锁功能不可批量操作', 'warning')
      }
    }

    const getExport = async () => {
      console.log(data.params, 'data.params');
      Modals('是否导出全部数据', '提示', 'warning').then(async () => {
        let res = await getTeam(data.params)
        console.log(res, 'getTeam');

      }).catch(() => {
        console.log("点击了取消")
      })
    }

    /* const getDelect = async () => {
      if (data.ids.length) {
        Modals('是否删除选择内容', '提示', 'warning').then(async () => {
          let arr = JSON.parse(JSON.stringify(data.ids))
          let res = await deleteList(arr + '')
          if (res.data.success) {
            tips('删除成功', 'success')
            getListData()
          }
        }).catch(() => {
          console.log("点击了取消")
        })

      } else {
        tips('请选择', 'warning')
      }
    } */

    return {
      currentChange,
      sizeChange,
      dataChange,
      classnameChange,

      selectIds,
      choosePersion,
      ruleFormRef,
      activeName,
      budgetYear,
      options,
      data,
      allTableData,
      page,
      selectedRows,
      columns,
      searchParams,
      handleEdit,
      // 列表
      getListData,
      //参与人员列表
      getJoinList,
      allJoinList,
      searchJoin,
      pageJoin,
      sltJoinList,
      clrJoin,


      handleSelectionChange,
      // 新增
      add,
      submitForm,
      ruleForm,
      rules,
      deleteList,
      getLock,
      handleConfirm,
      getUnlock,
      getExport,

      selectArr,

      monthVisible,
      openMonthTable,
      openTableData,
      handleEditItem,
      cancelItem,
      saveItem,


      callPerson,
      selectItemFn,
      addPersonBox,
      handleClosePerson,
      closePersonbox,
      save,
      changeValueUnit,
      delectIds
    }
  },
}
</script>
<style lang="scss" scoped>
.box_s {
  overflow-x: auto
}

.el-table__body-wrapper {
  overflow-x: auto !important;

}

.el_table_box {
  overflow-x: auto !important;



  scrollbar-width: none;

  overflow-x: auto
}

.selectLabel {
  width: 70%;
  min-height: 40px;
  height: 100%;
  // line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
}

.addLabel {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #169bd5;
  border-radius: 6px;
  color: #fff;
  margin-left: 15px;
}







.container {
  background-color: white;
  padding: 20px;
}

.el-col {
  line-height: 40px;
}

.el-form-item {
  .el-input {
    width: 100px;
    background-color: aliceblue;
  }

  .el-select {
    width: 100px;
  }
}

.custom-color {
  color: red !important;
  /* 确保优先级高于其他样式 */
}

.el-table th {
  background-color: #f0f0f0;
  /* 修改表头背景色 */
  color: #333;
  /* 修改表头文字颜色 */
}

/* .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
} */

.open-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/deep/.el-dialog__body {
  display: block !important;
}

.mt15 {
  margin-top: 15px;
}

.mb10 {
  margin-bottom: 10px;
}




.tc {
  text-align: center;
}
</style>
